<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>实时监控</title>
    <link rel="stylesheet" href="../../common/style/common.css">
    <link rel="stylesheet" href="../css/centerPage.css">
    <link rel="stylesheet" href="../css/realTime.css">
    <link rel="stylesheet" href="../../common/lib/popup/popup.css">
    <link rel="stylesheet" href="../../common/lib/jquery/paginator/paginator.css">
    <script src="../../common/lib/jquery/jquery.min.js"></script>
    <script src="../../common/lib/jquery/paginator/jq-paginator.min.js"></script>
    <script src="../../common/lib/layui/laydate/laydate.js"></script>
    <script src="../../common/lib/popup/popup.js"></script>
    <script src="../../common/lib/layui/layui.all.js"></script>
    <script src="../../common/lib/echarts/echarts.common.min.js"></script>
    <script src="../../common/js/common.js"></script>
</head>
<body>
<div class="main">
    <div class="row">
        <div class="col col-left">
            <div class="col-title">
                <span id="firstTitle">废水-PH值</span>
                <img src="../../common/images/realTime_Detail.png" data-id="ph" height="25" alt="" id="phBtn">
            </div>
            <div class="col-main" id="phChart">

            </div>
            <div class="col-footer">
                <span id="phNewest">最新浓度:--</span>
            </div>
        </div>
        <div class="col col-right">
            <div class="col-title">
                <span id="secondTitle">废水-总铬</span>
                <img src="../../common/images/realTime_Detail.png" data-id="cr" height="25" alt="" id="crBtn">
            </div>
            <div class="col-main" id="crChart"></div>
            <div class="col-footer">
                <span id="crNewest">最新浓度:--</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col col-left">
            <div class="col-title">
                <span>废水-总镍</span>
                <img src="../../common/images/realTime_Detail.png" data-id="ni" height="25" alt="" id="niBtn">
            </div>
            <div class="col-main" id="niChart"></div>
            <div class="col-footer">
                <span id="niNewest">最新浓度:--</span>
            </div>
        </div>
        <div class="col col-right">
            <div class="col-title">
                <span>废水-污水排口监控点流速</span>
                <img src="../../common/images/realTime_Detail.png" data-id="pointSpeed" height="25" alt="" id="pointSpeedBtn">
            </div>
            <div class="col-main" id="pointSpeedChart"></div>
            <div class="col-footer">
                <span id="sewageNewest">最新流速:--</span>
            </div>
        </div>
    </div>
</div>

<div class="diagram">
    <div class="chart">
        <div class="chart-left common-border">
            <div class="head">
                <div style="width: 100%;height: 10px"></div>
                <select class="img-select" id="chartDataType">
                    <option value="2">小时数据</option>
                    <option selected  value="1">分钟数据</option>
                </select>&nbsp;&nbsp;&nbsp;&nbsp;
                <input class="calendar" type="text" id="chartStartTime">&nbsp;&nbsp;至&nbsp;&nbsp;<input class="calendar" type="text" id="chartEndTime">&nbsp;&nbsp;
                <button class="searchInputBtn" id="chartSearch">搜索</button>
            </div>
            <div class="center">
                <div id="centerChart" style="width: 100%;height: 100%;"></div>
            </div>
            <div class="footer">
                <div data-id="chart" class="footer-tab" style="background-color:#4a90e2">图表</div>
                <div data-id="sheet" class="footer-tab" id="showShBtn">数据表</div>
            </div>
        </div>
        <div class="chart-right common-border">
            <div class="chart-right-radio">
                <input type="radio" name="chartRadio" id="pointRadio" value="sewage">
                <label for="pointRadio">污水排口监控点排放量（吨）</label>
            </div>
            <div class="chart-right-radio">
                <input type="radio" name="chartRadio" id="phRadio" value="ph">
                <label for="phRadio">PH值</label>
            </div>
            <div class="chart-right-radio">
                <input type="radio" name="chartRadio" id="crRadio" value="cr">
                <label for="crRadio">总铬（毫克/升）</label>
            </div>
            <div class="chart-right-radio">
                <input type="radio" name="chartRadio" id="niRadio" value="ni">
                <label for="niRadio">总镍（毫克/升）</label>
            </div>
        </div>
    </div>
    <div class="sheet">
        <div class="head">
            <div style="width: 100%;height: 10px"></div>
            <select class="img-select" id="sheetDataType">
                <option value="2">小时数据</option>
                <option selected value="1">分钟数据</option>
            </select>&nbsp;&nbsp;&nbsp;&nbsp;
            <input class="calendar" type="text" id="sheetStartTime">&nbsp;&nbsp;至&nbsp;&nbsp;<input class="calendar" type="text" id="sheetEndTime">&nbsp;&nbsp;
            <select class="img-select" id="sheetAlarmFlag">
                <option selected value="-1">所有</option>
                <option value="0">正常</option>
                <option value="1">超标</option>
                <option value="2">异常</option>
            </select>&nbsp;&nbsp;
            <button class="searchInputBtn" id="sheetSearch">搜索</button>

            <input id="sheetExport" type="image" src="../../common/images/export.png" height="20" style="position: relative;right: 0px;float: right">
        </div>
        <div class="center">
            <table id="monitorTable" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <th>报警时间</th>
                    <th>排口累计排放量（吨）</th>
                    <th>PH值</th>
                    <th>总铬（毫克/升）</th>
                    <th>总镍（毫克/升）</th>
                </tr>
            </table>
            <table id="monitorTableGas" cellspacing="0" cellpadding="0" align="center" style="display: none">
                <tr>
                    <th>报警时间</th>
                    <th>VOC（PPM）</th>
                    <th>甲苯（PPM）</th>
                </tr>
            </table>
        </div>
        <div class="footer">
            <div data-id="chart" class="footer-tab" id="showChartBtn">图表</div>
            <div data-id="sheet" class="footer-tab" style="background-color:#4a90e2">数据表</div>
            <span>每页显示&nbsp;&nbsp;</span>
            <select class="img-select" id="pageSize">
                <option value="20">20</option>
                <option value="10">10</option>
                <option value="5">5</option>
            </select>&nbsp;&nbsp;
            <ul id="pageTool" class="pagination">
                <li class="prev" jp-role="prev" jp-data="5"><a href="javascript:void(0);"></a></li>
                <li class="page active" jp-role="page" jp-data="6"><a href="javascript:void(0);"></a></li>
                <li class="next" jp-role="next" jp-data="7"><a href="javascript:void(0);"></a></li>
            </ul>
            <input type="image" src="../../common/images/legend1.png" height="20px">
        </div>
    </div>
</div>

<!--弹窗-->
<div id="goodcover" style="display: none;"></div>
<div id="code" >
    <div class="popup-title">
        <span style="font-size: 22px">数据详情信息</span>
        <a href="javascript:void(0)" id="closebt">
            <span class="jqclose" >x</span>
        </a>
    </div>
    <div class="goodtxt">
        <div id="info" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="infoMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">污水排放量</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="infoCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td colspan="3" style="width: 75%">升/秒</td>
                </tr>
                <tr>
                    <td style="width: 25%">平均瞬时排放量</td>
                    <td id="infoAvg" colspan="3" style="width: 75%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">最大瞬时排放量</td>
                    <td id="infoMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小瞬时排放量</td>
                    <td id="infoMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">吨</td>
                </tr>
                <tr>
                    <td style="width: 25%">累计排放量</td>
                    <td id="infoCou" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="phInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="phMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">PH值</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="phCollectTime" colspan="3" style="width: 75%">2019-01-05 15:00</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">最大浓度</td>
                    <td id="phMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小浓度</td>
                    <td id="phMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">平均浓度</td>
                    <td id="phAvg" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">修正浓度</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="phAlarmLimit" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">异常上限</td>
                    <td id="phNormalLimit" class="tableTdItem" style="width: 25%"></td>
                </tr>
            </table>
        </div>
        <div id="CrInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="crMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">总铬</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="crCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">毫克/升</td>
                </tr>
                <tr>
                    <td style="width: 25%">最大浓度</td>
                    <td id="crMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小浓度</td>
                    <td id="crMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">平均浓度</td>
                    <td id="crAvg" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">修正浓度</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="crAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="crNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">千克</td>
                </tr>
                <tr>
                    <td style="width: 25%">累计排放量</td>
                    <td id="crCou" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="NiInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="niMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">总镍</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="niCollectTime" colspan="3" style="width: 75%">2019-01-05 15:00</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">毫克/升</td>
                </tr>
                <tr>
                    <td style="width: 25%">最大浓度</td>
                    <td id="niMax" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">最小浓度</td>
                    <td id="niMin" class="tableTdItem" style="width: 25%"></td>
                </tr>
                <tr>
                    <td style="width: 25%">平均浓度</td>
                    <td id="niAvg" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正浓度</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="niAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="niNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">千克</td>
                </tr>
                <tr>
                    <td style="width: 25%">累计排放量</td>
                    <td id="niCou" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="VocInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="vocMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">VOC</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="vocCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="vocAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="vocNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">实时排放量</td>
                    <td id="vocRtd" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
        <div id="TolueneInfo" style="display: none">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">监控点名称</td>
                    <td id="tolueneMonitorPointName" style="width: 25%;color: #22b9e9;"></td>
                    <td style="width: 25%">监测数据</td>
                    <td style="width: 25%;color: #00d591;">甲苯</td>
                </tr>
                <tr>
                    <td style="width: 25%">监测时间</td>
                    <td id="tolueneCollectTime" colspan="3" style="width: 75%"></td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">浓度单位</td>
                    <td colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">超标上下限</td>
                    <td id="tolueneAlarmLimit" class="tableTdItem" style="width: 25%">0</td>
                    <td style="width: 25%">异常上下限</td>
                    <td id="tolueneNormalLimit" class="tableTdItem" style="width: 25%">0</td>
                </tr>
            </table>
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td style="width: 25%">排放量单位</td>
                    <td class="tableTdItem" colspan="3" style="width: 75%">PPM</td>
                </tr>
                <tr>
                    <td style="width: 25%">实时排放量</td>
                    <td id="tolueneRtd" class="tableTdItem" style="width: 25%"></td>
                    <td style="width: 25%">修正排放量</td>
                    <td class="tableTdItem" style="width: 25%">--</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<script src="../../common/js/WaterPollutionController.js"></script>
<script src="../../common/js/MonitorPointController.js"></script>
<script src="../../common/js/GasPollutionController.js"></script>
<script src="../js/realTime.js"></script>
</body>
</html>
